<template>
  <div>
    <a-drawer
      :title="titleDraw"
      placement="right"
      :width="1080"
      :closable="false"
      :visible="visible"
      :after-visible-change="afterVisibleChange"
      @close="onClose"
      :body-style="{ paddingBottom: '80px' }"
    >
      <div>
        <a-form-model
          :model="form"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item label="咨询标题">
            <a-input v-model="form.title" />
          </a-form-model-item>
          <a-form-model-item label="咨询分类">
            <a-select v-model="form.type" placeholder="选择新闻分类">
              <a-select-option value="0">
                反诈新闻
              </a-select-option>
              <a-select-option value="1">
                义警风采
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="咨询封面">
            <div class="clearfix">
              <image-upload v-model="form.image" />
              <a-modal
                :visible="previewVisible"
                :footer="null"
                @cancel="handleCancel"
              >
                <img alt="示例" style="width: 100%" :src="previewImage" />
              </a-modal>
            </div>
          </a-form-model-item>

          <a-form-model-item label="咨询内容">
            <editor v-model="form.content" />
          </a-form-model-item>
        </a-form-model>
      </div>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1
        }"
      >
        <a-button :style="{ marginRight: '8px' }" @click="onClose">
          取消
        </a-button>
        <a-button type="primary" @click="update">
          提交
        </a-button>
      </div>
    </a-drawer>
  </div>
</template>
<script>
import Editor from "@/components/Editor.vue";
import ImageUpload from "@/components/ImageUpload";
import { postAction } from "@/utils/request";
export default {
  components: { ImageUpload, Editor },
  data() {
    return {
      previewVisible: false,
      previewImage: "",
      fileList: [],
      editorText: "",
      config: {
        initialFrameWidth: null,
        initialFrameHeight: 350
      },
      visible: false,
      titleDraw: "新增咨询",
      labelCol: { span: 3 },
      wrapperCol: { span: 20 },
      form: {
        newsId: "",
        title: undefined,
        content: undefined,
        userId: false,
        image: "",
        type: "",
        createDate: "",
        updateDate: "",
        releaseDate: ""
      }
    };
  },
  mounted() {
  },
  methods: {
    open() {
      this.visible = true;
    },
    //保存
    update() {
      postAction('/news/updateNews', this.form).then((res) => {
        console.log(res.statusText)
      }).finally(() => {
      })
    },
    handleCancel() {
      this.previewVisible = false;
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
    },
    afterVisibleChange(val) {
      console.log("visible", val);
    },
    onClose() {
      this.visible = false;
    }
  }
};
</script>
<style lang="less" scoped>
/deep/ .ant-table-tbody {
  background: #fff;
}

/deep/ .ant-table.ant-table-bordered .ant-table-title {
  padding: 0;
}

.info {
  border-radius: 10px;
  line-height: 20px;
  padding: 10px;
  margin: 10px;
  background-color: #ffffff;
}

.header {
  width: 100%;
  background: #fff;
  display: flex;
  padding: 16px 16px;

  .title {
    flex: 1;
    font-size: 16px;
    color: black;
    font-weight: 500;
  }

  .seacher_add {
    display: flex;
    justify-content: space-around;
    flex: 1;

    .seacher {
      display: flex;
    }
  }
}

th.column-money,
td.column-money {
  text-align: right !important;
}
</style>
